import 'package:eh_mobile/common/utils/enums.dart';
import 'package:eh_mobile/common/utils/extension.dart';
import 'package:eh_mobile/common/values/svg_image.dart';
import 'package:eh_mobile/pages/control/light_control/widgets/brightness_progress_bar.dart';
import 'package:eh_mobile/pages/control/light_control/widgets/color_picker.dart';
import 'package:eh_mobile/pages/control/light_control/widgets/light_brightness_control.dart';
import 'package:eh_mobile/pages/control/light_control/widgets/light_control_bottom.dart';
import 'package:eh_mobile/pages/control/light_control/widgets/light_temp.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import '../../index.dart';

class LightControlPage extends GetView<LightControlController> {
  const LightControlPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
            child: Stack(
          children: [
            Obx(() => LightBrightnessControlWidget(
                  brightnessValue: controller.brightnessValue.value,
                  valueDidChanged: (double value) {
                    controller.brightnessValue.value = value;
                  },
                  valueChangedDidEnd: (double value) {},
                ).hidden(controller.showColourDisk.value)),
            Obx(() => _buildTempColorControlWidget()
                .hidden(!controller.showColourDisk.value)),
          ],
        )),

        // 灯光颜色控制
        SizedBox(
          height: 72.h,
          child: Obx(
            () => GridView.count(
              physics: const NeverScrollableScrollPhysics(),
              padding: const EdgeInsets.fromLTRB(25, 10, 25, 5).r,
              crossAxisCount: 5,
              crossAxisSpacing: 20.r,
              mainAxisSpacing: 0,
              children: _buildLightColoritem(),
            ),
          ),
        ),

        18.sizedBoxHeight,

        // 底部控制区域
        Obx(
          () => LightControlBottom(
            type: DeviceLListType.light,
            currectIndex: controller.currectIndex.value,
            tapCallback: (index) {
              controller.currectIndex.value = index;
              controller.showColourDisk.value = index != 0;
            },
          ),
        ),
      ],
    );
  }

  // 创建色温与颜色控制区域
  Widget _buildTempColorControlWidget() {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0).r,
      child: Column(
        children: [
          Expanded(
              child: Stack(
            children: [
              PageView.builder(
                controller: controller.pageController,
                physics: const NeverScrollableScrollPhysics(),
                padEnds: false,
                scrollDirection: Axis.horizontal,
                itemCount: 2,
                onPageChanged: (index) {},
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return Obx(() => ColorPicker(
                        color: controller.lightColor.value,
                        onColorChange: (Color value) {
                          controller.lightColor.value = value;
                        },
                        onColorChangeEnd: (Color value) {},
                        size: 280.r,
                        thumbSize: 38.r));
                  }
                  return LightTempWidget(
                    value: 3500,
                    valueChanged: (value) {},
                  );
                },
              ),
              Positioned(
                  bottom: 0,
                  child: BrightnessProgressBar(
                    value: controller.brightnessValue.value,
                    valueChanged: (value) {
                      controller.brightnessValue.value = value;
                    },
                  ))
            ],
          )),

          // 灯光控制类型
          Obx(
            () => SizedBox(
                height: 72.h,
                child: GridView.count(
                  physics: const NeverScrollableScrollPhysics(),
                  padding: const EdgeInsets.fromLTRB(25, 10, 25, 5).r,
                  crossAxisCount: 5,
                  crossAxisSpacing: 20.r,
                  mainAxisSpacing: 0,
                  children: _buildLightModelItem(),
                )),
          ),
        ],
      ),
    );
  }

  // 灯光控制类型item
  List<Widget> _buildLightModelItem() {
    var widgets = <Widget>[];

    Color? bgColor;
    Color? iconColor;

    for (var i = 0; i < controller.lightControlTypeIcons.length; i++) {
      bgColor = const Color.fromRGBO(69, 69, 69, 0.9);
      iconColor = const Color.fromRGBO(196, 196, 196, 0.5);
      if (i == 4) {
        if (controller.lightOpen.value) {
          bgColor = const Color.fromRGBO(0, 150, 208, 1);
          iconColor = const Color.fromRGBO(238, 238, 238, 1);
        }
      } else if (i == controller.lightControlTypeIndex.value &&
          controller.lightOpen.value) {
        bgColor = const Color.fromRGBO(255, 255, 255, 0.9);
        iconColor = const Color.fromRGBO(50, 50, 50, 1);
      }
      String iconName = controller.lightControlTypeIcons[i];
      Widget button = Container(
        padding: const EdgeInsets.all(13).r,
        decoration: BoxDecoration(
            color: bgColor, borderRadius: BorderRadius.circular(26).r),
        width: 52.r,
        height: 52.r,
        child: SvgPicture.asset(
          iconName,
          color: i == 0 ? null : iconColor,
        ),
      ).onClick(() {
        controller.lightModelItemClick(i);
      });
      widgets.add(button);
    }
    return widgets;
  }

  // 颜色选取页面
  List<Widget> _buildLightColoritem() {
    List colors;
    Color lightBriness;
    if (controller.currectIndex.value == 0) {
      lightBriness =
          Color.fromRGBO(255, 255, 255, controller.brightnessValue.value);
      colors = controller.lightBrightnessColors;
    } else {
      lightBriness = controller.lightColor.value;
      colors = controller.lightControlColors;
    }

    var widgets = <Widget>[];

    for (var i = 0; i < colors.length; i++) {
      Widget button = Container(
        padding: const EdgeInsets.all(13).r,
        decoration: BoxDecoration(
            color: i == 3 ? lightBriness : colors[i],
            borderRadius: BorderRadius.circular(26).r),
        width: 52.r,
        height: 52.r,
        child: i == 4
            ? SvgPicture.asset(
                SVGImage.icUpSvg,
                colorFilter: const ColorFilter.mode(
                    Color.fromRGBO(238, 248, 238, 1), BlendMode.srcIn),
              )
            : null,
      ).onClick(() {
        if (i == 4) {
        } else {
          // controller.lightColor.value = controller.lightControlColors[i];
        }
      });
      widgets.add(button);
    }
    return widgets;
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LightControlController>(
      init: LightControlController(),
      id: "light_control",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(
              backgroundColor: const Color(0xff323232),
              title: Text(Get.arguments),
              automaticallyImplyLeading: false,
              //隐藏返回按钮
              leadingWidth: 70.r,
              leading: UnconstrainedBox(
                child: Container(
                  width: 42.r,
                  height: 32.r,
                  padding: const EdgeInsets.fromLTRB(0, 4, 0, 4).r,
                  decoration: BoxDecoration(
                    color: const Color.fromRGBO(222, 222, 222, 0.1),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: SvgPicture.asset(
                    SVGImage.icReturnSvg,
                    // fit: BoxFit.contain,
                    colorFilter:
                        const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                  ),
                ).onClick(() {
                  Get.back();
                }),
              ),
              actions: [
                UnconstrainedBox(
                  child: Container(
                    width: 42.r,
                    height: 32.r,
                    margin: EdgeInsets.only(right: 14.r),
                    padding: const EdgeInsets.fromLTRB(0, 2, 0, 2).r,
                    decoration: BoxDecoration(
                      color: const Color.fromRGBO(222, 222, 222, 0.1),
                      borderRadius: BorderRadius.circular(16.r),
                    ),
                    child: SvgPicture.asset(
                      SVGImage.icMoreSvg,
                      colorFilter:
                          const ColorFilter.mode(Colors.white, BlendMode.srcIn),
                    ),
                  ).onClick(() {
                    Get.to(const DeviceInfoPage(), arguments: Get.arguments);
                  }),
                )
              ]),
          body: _buildView(),
        );
      },
    );
  }
}
